<template>
	<div id="BillDetail">
		<x-header :left-options="{showBack: false}" title="收支明细" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<ul v-if="flowList == ''">
			<div class="no-data">
				<img src="../../assets/images/home/nodata.png" />
			</div>
		</ul>
		<ul v-else>
			<li v-for="item in flowList">
				<div class="left">
					<p>{{item.cash_info}}</p>
					<span>{{item.add_time}}</span>
				</div>
				<!--cash-state 0  审核   1  成功-->
				<div v-if="item.cash_flow == 'outflow'" class="right">-{{item.cash_money}}</div>
				<div v-if="item.cash_flow == 'inflow'" class="right">+{{item.cash_money}}</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		data() {
			return {
				flowList: []
			}
		},
		components: {
			XHeader,
		},
		activated() {
			this.getCashFlow();
		},
		methods: {
			getCashFlow: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/seller/cash_flow.json',
					data: ''
				}).then((result) => {
					this.flowList = result.data.data;
				}).catch((err) => {

				})
			},
			back: function() {
				window.history.go(-1);
			},

		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}

	ul {
		width: 100%;
		margin-top: 0.26rem;
	}

	ul li {
		background: #fff;
		height: 1.7rem;
		overflow: hidden;
		padding: 0.26rem;
		position: relative;
	}

	ul li:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	ul li .left {
		float: left;
		width: 80%;
		overflow: hidden;
	}

	ul li .left p {
		color: #333;
		font-size: 0.34rem;
	}

	ul li .left span {
		display: block;
		color: #777;
		margin-top: 0.2rem;
		font-size: 0.34rem;
	}

	ul li .right {
		line-height: 0.9rem;
		height: 0.9rem;
		text-align: center;
		color: #333;
		font-size: 0.34rem;
	}

	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}

	.no-data img {
		width: 100%;
	}
</style>
